<template>
  <div class="screen-container" :style="containerStyle">
    <header class="screen-header">
      <div>
        <dv-decoration-5 style="width: 100%; height: 80px" />
      </div>
      <span class="logo">
        <dv-decoration-3 style="width: 250px; height: 30px" />
      </span>
      <span class="title">
        <dv-decoration-7
          style="width: 400px; height: 30px"
        >电商数据可视化</dv-decoration-7>
      </span>
      <div class="title-right">
        <img :src="themeIconSrc" class="qiehuan" @click="handleChangeTheme">
        <span class="datetime">{{ nowDate }}</span>
      </div>
    </header>
    <div class="screen-body">
      <section class="screen-left">
        <div
          id="left-top"
          :class="[fullScreenStatus.trend ? 'fullscreen' : '']"
        >
          <Trend ref="trend" />
          <div class="resize">
            <span
              :class="[
                'iconfont',
                fullScreenStatus.trend ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
              @click="changeSize('trend')"
            />
          </div>
        </div>
        <div
          id="left-bottom"
          :class="[fullScreenStatus.seller ? 'fullscreen' : '']"
        >
          <!-- 商家销售金额图表 -->
          <Seller ref="seller" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              :class="[
                'iconfont',
                fullScreenStatus.seller
                  ? 'icon-compress-alt'
                  : 'icon-expand-alt'
              ]"
              @click="changeSize('seller')"
            />
          </div>
        </div>
      </section>
      <section class="screen-middle">
        <div
          id="middle-top"
          :class="[fullScreenStatus.map ? 'fullscreen' : '']"
        >
          <!-- 商家分布图表 -->
          <Map ref="map" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              :class="[
                'iconfont',
                fullScreenStatus.map ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
              @click="changeSize('map')"
            />
          </div>
        </div>
        <div
          id="middle-bottom"
          :class="[fullScreenStatus.rank ? 'fullscreen' : '']"
        >
          <!-- 地区销量排行图表 -->
          <Rank ref="rank" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              :class="[
                'iconfont',
                fullScreenStatus.rank ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
              @click="changeSize('rank')"
            />
          </div>
        </div>
      </section>
      <section class="screen-right">
        <div id="right-top" :class="[fullScreenStatus.hot ? 'fullscreen' : '']">
          <!-- 热销商品占比图表 -->
          <Hot ref="hot" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              :class="[
                'iconfont',
                fullScreenStatus.hot ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
              @click="changeSize('hot')"
            />
          </div>
        </div>
        <div
          id="right-bottom"
          :class="[fullScreenStatus.stock ? 'fullscreen' : '']"
        >
          <!-- 库存销量分析图表 -->
          <Stock ref="stock" />
          <div class="resize">
            <!-- icon-compress-alt -->
            <span
              :class="[
                'iconfont',
                fullScreenStatus.stock ? 'icon-compress-alt' : 'icon-expand-alt'
              ]"
              @click="changeSize('stock')"
            />
          </div>
        </div>
      </section>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getThemeValue } from '../util/theme'
export default {
  components: {
    Hot: () => import('@/components/Hot.vue'),
    Map: () => import('@/components/Map.vue'),
    Rank: () => import('@/components/Rank.vue'),
    Seller: () => import('@/components/Seller.vue'),
    Stock: () => import('@/components/Stock.vue'),
    Trend: () => import('@/components/Trend.vue')
  },
  data() {
    return {
      // 定义每一个图表的全屏状态
      fullScreenStatus: {
        trend: false,
        seller: false,
        map: false,
        rank: false,
        hot: false,
        stock: false
      },
      nowDate: null,
      nowTimeId: null
    }
  },
  computed: {
    ...mapState(['theme']),
    containerStyle() {
      return {
        backgroundColor: getThemeValue(this.theme).backgroundColor,
        color: getThemeValue(this.theme).titleColor
      }
    },
    themeIconSrc() {
      return require(`/src/assets/img/${getThemeValue(this.theme).themeSrc}`)
    }
  },
  created() {
    this.setNowTime()
    this.$socket.registerCallBack('fullScreen', this.changeScreen)
    this.$socket.registerCallBack('themeChange', this.setTheme)
  },
  destroyed() {
    this.$socket.unRegisterCallBack('fullScreen')
    this.$socket.unRegisterCallBack('themeChange')
    clearInterval(this.nowTimeId)
  },
  methods: {
    changeSize(name) {
      const isFull = !this.fullScreenStatus[name]
      this.$socket.send({
        action: 'fullScreen',
        socketType: 'fullScreen',
        chartName: name,
        value: isFull
      })
    },
    changeScreen(data) {
      const { chartName, value } = data
      this.fullScreenStatus[chartName] = value
      this.$nextTick(() => {
        this.$refs[chartName].screenAdaptation()
      })
    },
    handleChangeTheme() {
      // this.$store.commit('changeTheme')
      this.$socket.send({
        action: 'themeChange',
        socketType: 'themeChange',
        chartName: '',
        value: ''
      })
    },
    setTheme(ret) {
      console.log(ret)
      this.$store.commit('changeTheme')
    },
    getNowTime() {
      const date = new Date()
      const year = date.getFullYear()
      /* 在日期格式中，月份是从0开始的，因此要加0
         使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
      */
      const month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
      // 拼接
      return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds
    },
    setNowTime() {
      if (this.nowTimeId) {
        clearInterval(this.nowTimeId)
      }
      this.nowTimeId = setInterval(() => {
        this.nowDate = this.getNowTime()
      }, 1000)
    }
  }
}
</script>
<style lang="less" scoped>
// 全屏样式的定义
.fullscreen {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  z-index: 100;
}

.screen-container {
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #161522;
  color: #fff;
  box-sizing: border-box;
}
.screen-header {
  width: 100%;
  height: 64px;
  font-size: 20px;
  position: relative;
  > div {
    img {
      width: 100%;
    }
  }
  .title {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 22px;
    transform: translate(-50%, -50%);
  }
  .title-right {
    display: flex;
    align-items: center;
    position: absolute;
    right: 0;
    top: 60%;
    transform: translateY(-80%);
  }
  .qiehuan {
    width: 28px;
    height: 21px;
    cursor: pointer;
  }
  .datetime {
    font-size: 15px;
    margin-left: 10px;
  }
  .logo {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-80%);
    img {
      height: 35px;
      width: 128px;
    }
  }
}
.screen-body {
  width: 100%;
  height: 100%;
  display: flex;
  margin-top: 10px;
  .screen-left {
    height: 100%;
    width: 27.6%;
    #left-top {
      height: 53%;
      position: relative;
    }
    #left-bottom {
      height: 31%;
      margin-top: 25px;
      position: relative;
    }
  }
  .screen-middle {
    height: 100%;
    width: 41.5%;
    margin-left: 1.6%;
    margin-right: 1.6%;
    #middle-top {
      width: 100%;
      height: 56%;
      position: relative;
    }
    #middle-bottom {
      margin-top: 25px;
      width: 100%;
      height: 28%;
      position: relative;
    }
  }
  .screen-right {
    height: 100%;
    width: 27.6%;
    #right-top {
      height: 46%;
      position: relative;
    }
    #right-bottom {
      height: 38%;
      margin-top: 25px;
      position: relative;
    }
  }
}
.resize {
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
</style>
